<template>
  <div>
    <MyTable :arr="list">
      <template v-slot="scope">
        <div style="color:orange; text-align: center;">
          {{ scope.index +1 }}
        </div>
      </template>
      <!-- price -->
      <template v-slot:price="scope">
        <div style="color:red;font-weight:700">
          {{ scope.price }}
        </div>
      </template>
      <!-- tags -->
      <template v-slot:tags="scope">
        <!-- {{ scope.row.tags }} -->
        <span v-for="(item, index) in scope.row.tags" :key="index"  class="tags">
          {{ item }}
          </span>
          <input
          class="tag-input form-control"
          style="width: 100px;"
          type="text"
          v-if="scope.row.inputVisible"
          @blur="scope.row.inputVisible = false"
          @keyup.enter="onKeyUpEnter(scope.row)"
          v-model.trim="scope.row.inputValue"
          />
          <button
          style="display: block;"
          class="btn btn-primary btn-sm add-tag"
          v-else
          @click="scope.row.inputVisible = !scope.row.inputVisible"
          >+Tag</button>
      </template>
      <template v-slot:options="scope">
        <button class="btn btn-danger btn-sm" @click="delItem(scope.row.id)">删除</button>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from './MyTable.vue'
import axios from 'axios'
export default {
  data () {
    return {
      list: []
    }
  },
  components: {
    MyTable
  },
  created () {
    this.getGoods()
  },
  methods: {
    async getGoods () {
      const { data: res } = await axios({
        url: 'https://www.escook.cn/api/goods'
      })
      console.log(res)
      this.list = res.data
      console.log(res.data)
    },
    onKeyUpEnter (row) {
      // console.log(row.inputValue)
      // 输入框的值不能为空
      if (row.inputValue === '') return alert('内容不能为空')
      row.tags.push(row.inputValue)
      row.inputValue = ''
      row.inputVisible = false
    },
    delItem (id) {
      // console.log(id)
      const index = this.list.findIndex(item => item.id === id)
      // console.log(index)
      this.list.splice(index, 1)
    }
  }

}
</script>

<style scoped>
.tags {
  font-size: 14px;
  color: #fff;
  background-color: #40ac73;
  border-radius: 8px;
  padding: 5px 8px;
  margin: 0 4px;
}
</style>
